<template>
    <div class="sidebar">
      <el-menu
        class="sidebar-el-menu"
        :default-active="active"
        :collapse="collapse"
        background-color="#334256"
        text-color="#ffffff"
        active-text-color="#20a0ff"
        router
      >
        <template v-for="item in items">
          <template>
            <el-menu-item :index="item.index" :key="item.index">
              <i :class="item.icon"></i>
              <span>{{item.title}}</span>
            </el-menu-item>
          </template>
        </template>
      </el-menu>
    </div>
</template>

<script>
  import bus from "../assets/js/bus";

  export default {
    name: "TheAside",
    data() {
      return {
        collapse: false,
        active: '',
        items: [
          {
            icon: 'el-icon-s-unfold',
            index: 'info',
            title: '概述统计'
          },
          {
            icon: 'el-icon-reading',
            index: 'book',
            title: '图书管理'
          },
          {
            icon: 'el-icon-collection',
            index: 'type',
            title: '分类管理'
          },
          {
            icon: 'el-icon-guide',
            index: 'borrow',
            title: '借还管理'
          },
          {
            icon: 'el-icon-user-solid',
            index: 'user',
            title: '用户管理'
          }
        ]
      };
    },
    methods: {
      onRoutes () {
        let arr=this.$route.path.replace("Home/","").split("/");
        this.active=arr[1]
      }
    },
    created() {
      bus.$on('collapse',msg => {
        this.collapse=msg
      })
      this.onRoutes()
    }

  }
</script>

<style scoped>
  .sidebar{
    display: block;
    position: absolute;
    left: 0;
    top: 70px;
    bottom: 0;
    background: #334256;
    overflow: scroll;
  }
  .sidebar::-webkit-scrollbar{
    width: 0;
  }
  .sidebar >ul{
    height: 100%;
  }
  .sidebar-el-menu:not(.el-menu--collapse){
    width: 150px;
  }
</style>
